<template>
    <div class="movetopbox">
        <!-- 返回按键 -->
        <div :class="['goback',{'scro':toudong.status>=0.7}]" @click="fanhui">‹</div>
        <!-- 顶部歌单名 -->
        <div class="listtopbox" :class="{'listscroll': toudong.status>=0.7}" :style="{backgroundColor:'rgba(255, 255, 255,'+toudong.status+')!important'}">
            <div class="topbox">
                <div class="wenzi">
                    {{toudong.name+''}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"movetop",
    props:['thisname','gdm'],
    data(){
        return {
            // 顶部的歌单名
            toudong:{
                status:0,
                name:'',
            },
            timse : null,
            thename:'',
        }
    },
    watch:{
        'toudong.status': {
            handler() {
                if(this.gdm == 1 || this.gdm == 10){
                    // 歌单页和新歌速递需要文字滚动
                    this.pd()
                }else{
                    // 专辑页不需要文字滚动
                    this.otherpd()
                }
            },
        },
        'thisname':{
            handler() {
                if(this.gdm == 1){
                    // 歌单页需要文字滚动
                    this.toudong.name=this.thisname
                }else if(this.gdm == 0){
                    // 专辑页不需要文字滚动
                    this.toudong.name = "专辑" 
                }else if(this.gdm == 5){
                    // 歌手全部歌曲页
                    this.toudong.name = "全部歌曲"
                }else if(this.gdm == 10){
                    // 新歌速递
                    this.toudong.name = "新歌速递"
                }else{
                    // 歌手页也不需要文字滚动
                    this.toudong.name = "歌手详情"
                }
            },
        }
    },
    created(){
        // 创建组件的时候回到最开始的地方
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
        // 添加滚动事件
        window.addEventListener('scroll', this.listscroll)
        document.body.addEventListener('scroll', this.listscroll)
    },
    methods:{
        listscroll(){
            let scrollTop = window.pageYOffset || document.documentElementscrollTop || document.body.scrollTop
            if(scrollTop >= 200){
                this.toudong.status = 1
            }else{
                this.toudong.status = scrollTop/200
            }
        },
        pd(){
            if(this.toudong.status >= 1){
                this.wzgd()
            }else{
                this.qcgd()
            }
        },
        fanhui(){
            this.$router.go(-1)
        },
        wzgd(){
            this.timse = setInterval(() => {
                let str = this.toudong.name;
                let f = str.slice(0, 1);
                let e = str.slice(1);
                this.toudong.name = e + f;
            }, 300);
        },
        qcgd(){
            clearInterval(this.timse)
            this.timse = null
            this.toudong.name = this.thisname
        },
        otherpd(){
            if(this.toudong.status >= 1){
                this.toudong.name = this.thisname
            }else{
                if(this.gdm == 0){
                    this.toudong.name = '专辑'
                }else if(this.gdm == 5){
                    this.toudong.name = "全部歌曲"
                }else if(this.gdm == 10){
                    this.toudong.name = "新歌速递"
                }else{
                    this.toudong.name = '歌手详情'
                }
            }
        },
    }
}
</script>
<style lang="less" scoped>
.goback{
    position:fixed;
    top: 0px;
    left: 0px;
    font-size: 2rem;
    color: white;
    // background-color: #eeeeee66;
    width: 50px;
    height: 50px;
    line-height: 45px;
    text-align: center;
    z-index: 151;
}
.scro{
    color:#a3a3a3 !important;
}
.listtopbox{
    z-index: 150;
    width: 100%;
    height:50px;
    position: fixed;
    top:0px;
    .topbox{
        display: flex;
        justify-content: center;
        position: relative;
    }
    .wenzi{
        height: 50px;
        line-height: 50px;
        // padding-left: 80px;
        width:70%;
        margin: 0 auto;
        font-size: 1.2rem;
        color: white;
        overflow: hidden;
    }
    .wzbox{
        margin-left: -10px;

    }
}
.listscroll{
    background-color: rgb(255, 255, 255) !important;
    .wenzi{
        color:#a3a3a3 !important;
    }
}
</style>